
<template>
    <div class="container">
        <a-space direction="vertical" style="width: 100%" :size="16">
            <a-card style="width: 100%" title="服务费配置">
                <div>请按照类目配置对应商品收取的服务费比例，商品成交后将自动扣除平台服务费费用。</div>
            </a-card>

            <a-card>
                <a-table :dataSource="dataSource" :columns="serverColumns" :pagination="pagination" @change="handleChangeSize">
                    <template #bodyCell="{ column, record }">
                        <template v-if="column.key === 'state'">
                            {{ record.state == 1 ? '启用' : '停用' }}
                        </template>
                        <template v-if="column.key === 'serviceCharge'">
                            {{ record.serviceCharge }}%
                        </template>
                        <template v-if="column.key === 'operate'">
                            <a-space>
                                <a-button type="primary" @click="handelAdd(record)">编辑</a-button>
                            </a-space>
                        </template>
                    </template>
                </a-table>
            </a-card>
        </a-space>
        <divideModal ref="divideRef" @refreshList="refreshList" />
    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { serverColumns } from './columns.js'
import divideModal from './components/divideModal.vue'
import { catalogList } from "@/api/goodConfig.js";
const pagination = ref({
    current: 1,
    pageSize: 10,
    defaultPageSize: 10,
    total: 0,
    showSizeChanger: true,
    pageSizeOptions: ['10', '20', '50', '100'],
    showTotal: (total) => `共 ${total} 条`,
})
const formState = ref({
    page: pagination.value.current,
    pageSize: pagination.value.pageSize,
    categoryId: undefined,
    subCategoryId: undefined,
    searchCondition: undefined,
    status: undefined,
})
const divideRef = ref(null)
const dataSource = ref([])
// 获取列表
const getCatalogList = async () => {
  const data = await catalogList(formState.value);
  if (data.code === 200) {
    dataSource.value = data.data.list;
    pagination.value.total = data.data.total;
  }
};

const handelAdd = (record) => {
    divideRef.value.open(record)
}

function handleReset() {
    formState.value = {
        page: 1,
        pageSize: 10,
        categoryId: undefined,
        subCategoryId: undefined,
        searchCondition: undefined,
        status: undefined,
    }
    pagination.value.current = 1
  pagination.value.pageSize = 10
    getCatalogList()
}

function refreshList() {
    getCatalogList()
}
function handleChangeSize(page) {
    formState.value.page = page.current
    formState.value.pageSize = page.pageSize
    pagination.value.current = page.current
    pagination.value.pageSize = page.pageSize
    getCatalogList()
}
onMounted(() => {
    getCatalogList()
})
</script>
  
  <style lang="less">
.img-item {
    display: flex;
    flex-direction: column;
    align-items: center;

    .img-label {
        margin-top: 6px;
        color: #9599a5;
        font-size: 12px;
    }
}
</style>
  